<template>
  <LoadPage :show="showPage"/>
  <view class="main">
    <view class="content">
      <view class="top">
        <view class="dispaly-line-center">
          <view class="one-cate dispaly-center">
            <view class="one-cate-item" v-for="(item, index) in cateList" :key="index"
                  @click.stop="clickCateItem(item, index)">
              <view class="cate-bg">
                <image src="/static/mine/take-ac-bg.png" mode="aspectFill" v-if="index == current"/>
                <image src="/static/mine/take-bg.png" mode="aspectFill" v-else/>
                <view class="txt dispaly-align-center">{{ item.name }}</view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="order-list" :style="{ marginTop: cateHeight + 'px' }">
        <view class="order-item" v-for="(item, index) in dataList" :key="index">
          <view class="user dispaly-just-between">
            <view class="infos dispaly-center">
              <view class="avatar ">
                <image
                    :src="item.avatar"
                    mode="aspectFill"/>
                <image class="q" src="/static/icon/q.png" mode="aspectFill"/>
              </view>
              <view class="name">{{item.nickName}}</view>
            </view>
            <view class="money">{{Number(item.price).toFixed(2)}}</view>
          </view>
          <view class="name">{{item.name}}</view>
          <view class="desc">{{item.intro}}</view>
          <view class="dispaly-just-between">
            <view class="time-box dispaly-center">
              <view class="time-icon">
                <image src="/static/icon/time.png" mode="aspectFill"/>
              </view>
              <view class="time-txt">{{item.startTime}} 至 {{item.endTime}}</view>
            </view>
            <view class="user-id">ID{{item.id}}</view>
          </view>
          <view class="info">
            <view class="info-item dispaly-center">
              <view class="info-left">QQ</view>
              <view class="info-right dispaly-just-between">
                <view class="info-con">{{item.qq}}</view>
                <view class="info-btn" @click.stop="copy(item.qq)">
                  <image src="/static/icon/btn.png" mode="aspectFill"/>
                </view>
              </view>
            </view>
            <view class="info-item dispaly-center">
              <view class="info-left">微信</view>
              <view class="info-right dispaly-just-between">
                <view class="info-con">{{item.wx}}</view>
                <view class="info-btn"  @click.stop="copy(item.wx)">
                  <image src="/static/icon/btn.png" mode="aspectFill"/>
                </view>
              </view>
            </view>
            <view class="info-item dispaly-center">
              <view class="info-left" style="border-bottom: none">电话</view>
              <view class="info-right dispaly-just-between" style="border-bottom: none">
                <view class="info-con">{{item.phonenumber}}</view>
                <view class="info-btn" @click.stop="copy(item.phonenumber)">
                  <image src="/static/icon/btn.png" mode="aspectFill"/>
                </view>
              </view>
            </view>
          </view>
          <view class="btn-box" v-if="current == 0">
            <view class="item-box dispaly-just-between">
<!--              <view class="item">-->
<!--                <view class="b-txt dispaly-align-center" @click.stop="getCancel(item)">取消</view>-->
<!--                <image src="/static/mine/q.png" mode="aspectFill"/>-->
<!--              </view>-->
              <button class="item" open-type="contact">
                <view class="b-txt dispaly-align-center">联系客服</view>
                <image src="/static/mine/q.png" mode="aspectFill" />
              </button>
              <view class="item" v-if="item.buyStatus == 0">
                <view class="b-txt dispaly-align-center" style="color: #FFD257 " @click.stop="confirm(item)">完成</view>
                <image src="/static/mine/w.png" mode="aspectFill"/>
              </view>
            </view>
          </view>
          <view class="ok dispaly-center" v-else>
            <view class="time-txt dispaly-align-center">完成时间</view>
            <view class="time">{{item.finishTime}}</view>
          </view>
        </view>
        <LoadMore :status="status"/>
      </view>
    </view>
  </view>
</template>

<script setup>
import {ref, onMounted, reactive} from 'vue';
import {getElementHeight, deleteObjectEmptyKey, copy} from '@/utils/util'
import {jqList, completed, cancel} from '@/api/apiList';
import {onReachBottom, onPullDownRefresh, onLoad} from "@dcloudio/uni-app";

const dataList = ref([])
const queryData = reactive({
  pageSize: 10,
  pageNum: 1,
  status: '2',
  type: '0'
})
const status = ref('loadmore')
const showPage = ref(true)
const getListData = async () => {
  status.value = 'loading'
  const newQuery = deleteObjectEmptyKey(queryData)
  const res = await jqList(newQuery)
  if (res.code == 200) {
    if (res.rows.length) {
      dataList.value = [...dataList.value, ...res.rows]
      status.value = 'loadmore'
    } else {
      status.value = 'nomore'
    }
    showPage.value = false
  }
}

// 完成
const confirm = async (item) => {
  uni.showModal({
    title: "提示",
    content: "完成",
    success: async function (res) {
      await uni.showLoading({
        title: '加载中',
        icon: 'none'
      })
      if (res.confirm) {
        const res = await completed({type:2, goodsId: item.id})
        if(res.code == 200) {
          await uni.showToast({
            title: res.msg,
            icon: 'none'
          })
          queryData.pageNum = 1
          dataList.value = []
          uni.hideLoading()
          await getListData()
        }else {
          uni.hideLoading()
        }
      }else {
        uni.hideLoading()
      }
    },
  });
}

// 取消
const getCancel = async (item) => {
  uni.showModal({
    title: "提示",
    content: "取消",
    success: async function (res) {
      await uni.showLoading({
        title: '加载中',
        icon: 'none'
      })
      if (res.confirm) {
        const res = await cancel({status:2, goodsId: item.id})
        if(res.code == 200) {
          await uni.showToast({
            title: res.msg,
            icon: 'none'
          })
          queryData.pageNum = 1
          dataList.value = []
          uni.hideLoading()
          await getListData()
        }else {
          uni.hideLoading()
        }
      }else {
        uni.hideLoading()
      }
    },
  });
}

onLoad(() => {
  getListData()
})

onReachBottom(() => {
  queryData.pageNum++
  getListData()
})

onPullDownRefresh(() => {
  uni.showLoading({
    title: '加载中'
  })
  queryData.pageNum = 1
  dataList.value = []
  getListData()
  uni.hideLoading()
  uni.stopPullDownRefresh()
})


const cateList = ref([
  {name: '待完成', id: 2},
  {name: '已完成', id: 3},
])

const current = ref(0)
const clickCateItem = (item, index) => {
  current.value = index
  queryData.pageNum = 1
  queryData.status = item.id
  dataList.value = []
  getListData()
}

const takeConfirm = () => {
  uni.navigateTo({
    url: `/subPackage/index/takeDetail`
  })
}

// 获取元素高度
const cateHeight = ref(0)
onMounted(async () => {
  const res = await getElementHeight('.top')
  cateHeight.value = res
})

</script>

<style lang="scss" scoped>
$i-height: 68rpx;
$i-width: 692rpx;

.top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background: #ffbf0f;

  .one-cate {
    .one-cate-item {
      .cate-bg {
        width: 347rpx;
        height: 80rpx;
        position: relative;

        image {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          width: 347rpx;
          height: 80rpx;
        }

        .txt {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          width: 347rpx;
          height: 80rpx;
          font-family: IPix;
          font-size: 30rpx;
          color: #4E3B0C;
        }
      }
    }
  }
}


.order-list {
  padding: 30rpx;

  .order-item:last-child {
    margin-bottom: 0;
  }

  .order-item {
    margin-bottom: 28rpx;
    border: 6rpx solid #4e3b0c;
    padding: 24rpx;
    background-color: #ffd257;

    .name {
      font-family: IPix;
      font-size: 28rpx;
      color: #000000;
      margin: 30rpx 0 15rpx 0;
    }

    .user {
      .infos {
        .avatar {
          margin-right: 20rpx;
          border: 1rpx solid #FFFFFF;
          border-radius: 50%;
          width: 74rpx;
          height: 74rpx;
          position: relative;

          .q {
            width: 74rpx;
            height: 74rpx;
          }

          image {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            width: 74rpx;
            height: 74rpx;
            border-radius: 50%;
          }
        }

        .name {
          font-family: IPix;
          font-size: 22rpx;
          color: #000000;
        }
      }

      .money {
        font-family: IPix;
        font-size: 32rpx;
        color: #000000;
      }
    }

    .desc {
      margin: 18rpx 0 10rpx 0;
      font-family: IPix;
      font-size: 24rpx;
      color: #000000;
      line-height: 36rpx;
    }

    .info {
      border: 4rpx solid #54400f;
      margin-top: 16rpx;

      .info-item {
        .info-left:last-child {
          border-bottom: none;
        }

        .info-left {
          border-right: 4rpx solid #54400f;
          border-bottom: 4rpx solid #54400f;
          padding-left: 16rpx;
          flex: 2;
          background: #e6bd4e;
          font-family: IPix;
          font-size: 28rpx;
          color: #000000;
          height: 84rpx;
          line-height: 84rpx;
        }

        .info-right {
          border-bottom: 4rpx solid #54400f;
          padding: 0 19rpx;
          flex: 4;
          height: 84rpx;
          background: #ffd257;
          line-height: 84rpx;

          .info-con {
            font-family: IPix;
            font-size: 28rpx;
            color: #000000;
          }

          .info-btn {
            height: 68rpx;

            image {
              width: 78rpx;
              height: 68rpx;
            }
          }
        }
      }
    }

    .ok {
      margin-top: 20rpx;

      .time-txt {
        width: 140rpx;
        height: 70rpx;
        background-color: #f5c245;
        border: 2rpx solid #4b3c16;
        font-family: IPix;
        font-size: 28rpx;
        color: #000000;
        margin-right: 30rpx;
      }

      .time {
        font-family: IPix;
        font-size: 23rpx;
        color: #000000;
      }
    }

    .user-id {
      font-family: IPix;
      font-size: 22rpx;
      color: #000000;
    }

    .time-box {


      .time-icon {
        margin-right: 13rpx;

        image {
          width: 22rpx;
          height: 22rpx;
        }
      }

      .time-txt {
        font-family: IPix;
        font-size: 22rpx;
        color: #000000;
      }
    }
  }
}

.btn-box {
  width: 100%;
  margin-top: 20rpx;

  .item-box {
    .item {
      position: relative;
      width: 304rpx;
      height: 82rpx;
      z-index: 99;

      image {
        position: absolute;
        z-index: -1;
        left: 0;
        right: 0;
        top: 0;
        width: 304rpx;
        height: 82rpx;
      }

      .b-txt {
        font-family: IPix;
        font-size: 36rpx;
        color: #000000;
        width: 304rpx;
        height: 82rpx;
      }
    }
  }
}
</style>